<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <%-- 页头 --%>
    <title>播放视频 - ReadJava教程</title>
    <%@include file="../common/head.jsp" %>

</head>
<body oncontextmenu="return false">
<div class="wrapper">

    <%-- 导航 --%>
    <%@include file="../common/header.jsp" %>

    <%-- 侧边栏 --%>
    <div class="sidebar">
        <div class="scrollbar-inner sidebar-wrapper">
            <ul class="nav">
                <c:forEach items="${videoList}" var="video">
                    <li class="nav-item" id="${video.videoUrl}">
                        <a href="javascript:void(0);">
                            <i class="la ${video.videoIcon}"></i>
                            <p>${video.videoTitle}</p>
                        </a>
                    </li>
                </c:forEach>
            </ul>
        </div>
    </div>

    <div class="main-panel" style="background-color: black">
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <video id="myVideo" width="100%" height="550px" controls="controls" controlslist="nodownload">
                        你的浏览器不支持视频播放器，请升级
                    </video>
                </div>
            </div>
        </div>
    </div>
</div>

</body>

<%-- js --%>
<%@include file="../common/script.jsp" %>

<script>
    $(function () {
        // $(".nav>li:first").addClass('active');

        $(".nav>li").on("click", function () {
            $(this).siblings('li').removeClass('active');
            $(this).addClass('active');
            var vcUrl = $(this).attr("id");
            $("#myVideo").attr("src", vcUrl);
        });
    });
</script>
</html>